﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FullsizeGoogleMap.aspx.cs" Inherits="FriendsNearby.Fbml.FullsizeGoogleMap" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Contacts Nearby - Fullsize Map</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=<%= FriendsNearby.ConfigHelper.GoogleMapsAPIKey %>" type="text/javascript">
    </script>
    <link rel="stylesheet" href="FullsizeGoogleMap.css" type="text/css" />
    <script type="text/javascript" src="RenderMap.js"></script>        
    <script type="text/javascript">
    //<![CDATA[	    
    function onLoad()
    {
        resizeApp();
        
        map = new GMap2(document.getElementById("mapCanvas"));

        var meIcon = new GIcon(G_DEFAULT_ICON);
        meIcon.image = "./Images/marker-me.png";
	    markerMe = { icon:meIcon };

        var friendIcon = new GIcon(G_DEFAULT_ICON);
        friendIcon.image = "./Images/marker-friend.png";
	    markerFriend = { icon:friendIcon };

        var foafIcon = new GIcon(G_DEFAULT_ICON);
        foafIcon.image = "./Images/marker-foaf.png";
	    markerFoaf = { icon:foafIcon };

        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.addControl(new GScaleControl());
        map.addControl(new GOverviewMapControl());
        
        fillMap(map, GetMapData(), [markerMe, markerFriend, markerFoaf]);
    }
    
    function resizeApp() {
	    var offsetTop = 0;
	    var mapElem = document.getElementById("mapCanvas");
	    for (var elem = mapElem; elem; elem = elem.offsetParent) {
		    offsetTop += elem.offsetTop;
	    }
	    var height = getWindowHeight() - offsetTop - 10;
	    if (height >= 0) {
		    mapElem.style.height = height + "px";
	    }
    }


    function getWindowHeight() {
	    if (window.self && self.innerHeight) {
		    return self.innerHeight;
	    }
	    if (document.documentElement && document.documentElement.clientHeight) {
		    return document.documentElement.clientHeight;
	    }
	    return 0;
    }    
    //]]>
    </script>
</head>
<body style="border: 0px; margin: 0px;" onload="onLoad();" onresize="resizeApp();">
    <div class="header">
        <h1>Contacts Nearby - Fullsize Map</h1>
    </div>
    <div class="container">
        <div class="right">
            References:
            <ul style="font-size: small;">
                <li style="list-style-image: url(./Images/ref-me.png)">&nbsp;You</li>
                <li style="list-style-image: url(./Images/ref-friend.png)">&nbsp;Direct Contact</li>
                <li style="list-style-image: url(./Images/ref-foaf.png)">&nbsp;Contact of a contact</li>
            </ul>
        </div>    
        <div class="middle">
            <div id="mapCanvas">
            </div>
        </div>
     </div>
</body>
</html>
